<template>
  <div>
    <!-- style="text-align: center;" -->
    <h2 class="title">{{itemDetail.title}}</h2>
    <div class="info mt10">
      <h5>
        栏目：{{itemDetail.column_name}}&nbsp;&nbsp;&nbsp;&nbsp;
        <span v-if="itemDetail.alias">别名：{{itemDetail.alias}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
        发布人：{{itemDetail.author}}&nbsp;&nbsp;&nbsp;&nbsp;
        发布时间：<span style="color: #999;">{{itemDetail.created_at}}</span>
      </h5>
    </div>
    <div class="main" v-html="itemDetail.content"></div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
    export default {
        name: "Add",
        data(){
        	return {
            /* 添加编辑 */
            confirmLoading: false,//按钮loading状态
            /* 添加编辑end */
        	}
        },
        computed: {
        	...mapState({
        		requestCode: state => state.newList.requestCode,
        		columnData: state => state.newList.columnData,  //全部栏目信息
            itemDetail: state => state.newList.itemDetail,  //详情
        	}),
        },
        methods: {
          ...mapActions({
            dataDetail: 'newList/dataDetail',    //详情
            columnAll: 'newList/columnAll',    //全部栏目信息
          }),
          //返回
          returnBtn(){
            const that = this
            this.$confirm({
            	title: `您确定要返回上一页吗?`,
            	content: `返回上一页将不保留当前输入数据!`,
            	okText: '确定',
            	okType: 'danger',
            	cancelText: '取消',
            	onOk() {
                that.$router.back(-1)
            	},
            });
          },
        },
        mounted(){
          // this.columnAll()
          if (this.$route.params.id !== undefined) {
            const id = this.$route.params.id;
            this.dataDetail(id);
          }
        },
        watch: {
          $route() {
            const id = this.$route.params.id;
            this.dataDetail(id);
          },
        },
    }
</script>

<style scoped>
  .title {
    text-align: center;
  }

  .info {
    border-bottom: 1px solid #ccc;
    /* padding-left: 10px; */
    padding-bottom: 8px;
    margin-bottom: 10px;
    text-align: center;
  }

  .main {
    padding: 10px; 
    /* text-align: center */
  }

  .main >>> p {
    /* text-indent: 2em;  */
    /* text-align: justify */
  }

  .main >>> img {
    /* text-align: center; */
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  
</style>
